<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Online HTML Editior</title>
    <script src=http://codemirror.net/lib/codemirror.js type=text/javascript></script>
    <script src=http://codemirror.net/mode/xml/xml.js type=text/javascript></script>
    <script src=http://codemirror.net/mode/javascript/javascript.js type=text/javascript></script>
    <script src=http://codemirror.net/mode/css/css.js type=text/javascript></script>
    <script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js type=text/javascript></script>
    <link rel=stylesheet href=http://codemirror.net/lib/codemirror.css type=text/css>
    <link rel=stylesheet href=http://codemirror.net/doc/docs.css type=text/css>
<style type=text/css>

/* Default theme */

.cm-s-default span.cm-keyword {color: #708;} /* names color (css), var (js) */
.cm-s-default span.cm-atom {color: #219;} /* #, color, id */
.cm-s-default span.cm-number {color: #164; color: green;} /* value (css), nums (css/js) */
.cm-s-default span.cm-def {color: #00f; }
.cm-s-default span.cm-variable {color: black; } /* text, property */
.cm-s-default span.cm-variable-2 {color: #05a;} /* font-family (css) */
.cm-s-default span.cm-variable-3 {color: #085;}
.cm-s-default span.cm-property {color: black;} /* property (css) */
.cm-s-default span.cm-operator {color: darkmagenta;} /* text js */
.cm-s-default span.cm-comment {color: #a50; color: #aaa; }
.cm-s-default span.cm-string {color: #a11;}  /* all code between "...", '...' */
.cm-s-default span.cm-string-2 {color: #f50;} /* value css - bold etc */
.cm-s-default span.cm-meta {color: #8D013E;} /* doctype html */
.cm-s-default span.cm-error {color: #f00; }
.cm-s-default span.cm-qualifier {color: #555; }
.cm-s-default span.cm-builtin {color: #30a;}
.cm-s-default span.cm-bracket {color: #997;} 
.cm-s-default span.cm-tag {color: #4F020B;} /* all tag elemen */
.cm-s-default span.cm-attribute {color: #024F47; } /* all code before "=" */
.cm-s-default span.cm-header {color: blue; }
.cm-s-default span.cm-quote {color: #090;}
.cm-s-default span.cm-hr {color: #999;}
.cm-s-default span.cm-link {color: #00c;}


span.cm-header, span.cm-strong {font-weight: bold;}
span.cm-em {font-style: italic;}
span.cm-emstrong {font-style: italic; font-weight: bold;}
span.cm-link {text-decoration: underline;}

span.cm-invalidchar {color: #f00;}

div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;color:yellow;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;color:red;}

.CodeMirror {font-family: monaco, Courier, Courier New, Monospace;font-size:0.9em;line-height: 0.97em;}
div.CodeMirror-selected {background: #d9d9d9; background: yellow;}
.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; background: blue;}




.cm-s-default span.cm-keyword {color: orange;} /* names color (css), var (js) */
.cm-s-default span.cm-atom {color: aquamarine;} /* #, color, id */
.cm-s-default span.cm-number {color: #164; color: lightgreen;} /* value (css), nums (css/js) */
.cm-s-default span.cm-def {color: cyan; }
.cm-s-default span.cm-variable {color: #eee; } /* text, property */
.cm-s-default span.cm-variable-2 {color: dodgerblue;} /* font-family (css) */
.cm-s-default span.cm-variable-3 {color: red;}
.cm-s-default span.cm-property {color: #eee;} /* property (css) */
.cm-s-default span.cm-operator {color: lightsalmon;} /* text js */
.cm-s-default span.cm-comment {color: #aaa;  } /* comment */
.cm-s-default span.cm-string {color: cornflowerblue;}  /* all code between "...", '...' */
.cm-s-default span.cm-string-2 {color: yellow;} /* value css - bold etc */
.cm-s-default span.cm-meta {color: sandybrown;} /* doctype html */
.cm-s-default span.cm-error {color: #f00; }
.cm-s-default span.cm-qualifier {color: darkturquoise; } /* class */
.cm-s-default span.cm-builtin {color: #30a;color:moccasin;}
.cm-s-default span.cm-bracket {color: #997;color:red;} 
.cm-s-default span.cm-tag {color: #fff;} /* all tag elemen */
.cm-s-default span.cm-attribute {color: palegoldenrod; } /* all code before "=" */
.cm-s-default span.cm-header {color: lightblue; }
.cm-s-default span.cm-quote {color: yellowgreen;}
.cm-s-default span.cm-hr {color: #999;}
.cm-s-default span.cm-link {color: red;}
.CodeMirror{color:lightskyblue;} /* teks utama */
div.CodeMirror-selected {background: #d9d9d9; background: darkred;}
.CodeMirror-focused div.CodeMirror-selected { background: #d7d4f0; background: black;}
.CodeMirror pre.CodeMirror-cursor {border-left: 1px solid white;}

/*.CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
}
iframe {
    width: 49%; 
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0px;
}*/
body{
    padding:0;
    margin:0;
}
#GR_ho{
    margin:4px 0;
    width:99%;
    margin:4px auto;
    padding:0;
}
#GR_ho h1{
    display:block;
    font:bold 40px Times New Roman, Serif;
    padding:0;
    margin:2px auto;
    text-align:center;border:1px solid #111;  /*border-bottom:none;  border-radius:35px 35px 0 0px; */
}
#GR_ho h1 a{
    color:royalblue;
    text-shadow:-1px -1px 0 #ccc, 1px 1px 0 #222;
    text-decoration:none;
}
#GR_ho h1 a:hover{
    color:red;
}
.codearea{
    display:block; 
    padding:5px 0px;
    width:65.4%;
    margin:4px auto 0;
    background:#444;
}
.CodeMirror {
    width: 94.5%;
    margin:0 auto;
background: #c7d1d6;
background: -moz-linear-gradient(top, #c7d1d6 0%, #dce6ed 81%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c7d1d6), color-stop(81%,#dce6ed));
background: -webkit-linear-gradient(top, #c7d1d6 0%,#dce6ed 81%);
background: -o-linear-gradient(top, #c7d1d6 0%,#dce6ed 81%);
background: -ms-linear-gradient(top, #c7d1d6 0%,#dce6ed 81%);
background: linear-gradient(to bottom, #c7d1d6 0%,#dce6ed 81%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7d1d6', endColorstr='#dce6ed',GradientType=0 );

background: #263038;
background: -moz-linear-gradient(top, #263038 0%, #4d4e54 57%, #5b5d63 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#263038), color-stop(57%,#4d4e54), color-stop(100%,#5b5d63));
background: -webkit-linear-gradient(top, #263038 0%,#4d4e54 57%,#5b5d63 100%);
background: -o-linear-gradient(top, #263038 0%,#4d4e54 57%,#5b5d63 100%);
background: -ms-linear-gradient(top, #263038 0%,#4d4e54 57%,#5b5d63 100%);
background: linear-gradient(to bottom, #263038 0%,#4d4e54 57%,#5b5d63 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#263038', endColorstr='#5b5d63',GradientType=0 );


background: #1f292d;
background: -moz-linear-gradient(top, #1f292d 0%, #4e5156 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1f292d), color-stop(100%,#4e5156));
background: -webkit-linear-gradient(top, #1f292d 0%,#4e5156 100%);
background: -o-linear-gradient(top, #1f292d 0%,#4e5156 100%);
background: -ms-linear-gradient(top, #1f292d 0%,#4e5156 100%);
background: linear-gradient(to bottom, #1f292d 0%,#4e5156 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f292d', endColorstr='#4e5156',GradientType=0 );



    border:6px solid #eee;
    padding:10px 0 0px 10px;
}
.CodeMirror-scroll {
    height: 240px;
}
.LGR,.RGR{
    float:left;
    width:16.8%;
    margin:-2px 0px -4px;
    height:280px;
    border-left:1px solid #111;border-right:1px solid #111;
}
.RGR{
    float:right;
    /*border-radius:0 0px 75px 75px;*/
}
iframe{
    display:block;    position:fixed;top:330px;    left:0;
    background:#fff; 
    width: 100%; 
    border:none !important;
    margin:5px auto;
    min-height: 300px;
}
a,iframe{
    transition:0.3s;
    -o-transition:0.3s;
    -ms-transition:0.3s;
    -moz-transition:0.3s;
    -webkit-transition:0.3s; 
}
iframe:hover {
    top:0px;
    min-height:600px;
    z-index:9999;
}
body,#GR_ho,.LGR,.RGR,#GR_ho h1{
    background: #b5bdc8;
    background: -moz-linear-gradient(top, #b5bdc8 0%, #28343b 49%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(49%,#28343b));
    background: -webkit-linear-gradient(top, #b5bdc8 0%,#28343b 49%);
    background: -o-linear-gradient(top, #b5bdc8 0%,#28343b 49%);
    background: -ms-linear-gradient(top, #b5bdc8 0%,#28343b 49%);
    background: linear-gradient(to bottom, #b5bdc8 0%,#28343b 49%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 );
}
</style>
<!--[if lt IE 9]>
<style type="text/css">
iframe{
    top:0;
    display:block; 
    position:relative;
    background:#fff; 
    width: 100%;
    height:700px;
    border:none !important;
    margin:5px auto;
}
iframe:hover{
    position:relative;
}
</style>
<![endif]--> 
</head>
<body>
<div id="GR_ho">

<h1 style="display:block;text-align:center;"><a href="http://gubhugreyot.blogspot.com/" target="_blank">Online HTML Editor</a></h1>
<div class="LGR"></div>
<div class="RGR"></div>
<div class="codearea">
<textarea id="code" name="code">
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 canvas demo</title>

<title>Online HTML Editor</title>

<style type="text/css">
.meong{
    padding:10px;
    background:lightblue;
    margin:10px 0;
    font-size:40px;
    letter-spacing:-1px;
}
.meong img{
    vertical-align:middle;
    margin-right:20px;
}
p {
    font: bold 22px Times New Roman, Serif;
    color: teal;
    text-shadow:1px 1px 1px #000;   /* iframe */ 
}
</style>

</head>
<body>

<p class="meong">
<a href="http://gubhugcss.blogspot.com" target="_blank" title="Ciluk....., baaaaa....!!!!!"><img src="https://lh6.googleusercontent.com/-QYGyo4MaOD4/UDAZ-88GC7I/AAAAAAAAAMw/IP-xTZN5NFg/s120/gambar-kucing-300x300.jpg" width="120" height="120" alt="Kucing garong" /></a>
    Kucing Garong
</p>


<p>Canvas pane goes here:</p>
    <canvas id="pane" width="300" height="200"></canvas>
    
<script type="text/javascript">
    var canvas = document.getElementById('pane');
    var context = canvas.getContext('2d');
    
    context.fillStyle = 'rgb(250,0,0)';
    context.fillRect(10, 10, 55, 50);

    context.fillStyle = 'rgba(0, 0, 250, 0.5)';
    context.fillRect(30, 30, 55, 50);
</script>

</body>
</html>
</textarea>
<div style="clear:both;"></div>
</div>
<iframe id="preview"></iframe>
</div>
<script type="text/javascript">
var delay;
// Initialize CodeMirror editor with a nice html5 canvas demo.
      var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
        mode: 'text/html',
        tabMode: 'indent',
        onChange: function() {
          clearTimeout(delay);
          delay = setTimeout(updatePreview, 300);
        }
      });
      
      function updatePreview() {
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
    </script>

</body>
</html>